<template>
	<view class="containers">
		<view class="topBox">
			<view class="c_title">
				<image class="title_icon m_left_16" src="../../static/img/feedback/type.png"></image>
				反馈类型
			</view>
			<view class="line"></view>
			<view class="btnBox m_left_16">
				<view class="btn" @tap="choose(item.label)" :class="{active:item.isChoose}" v-for="(item,index) in btnData" :key="index">{{item.label}}</view>
			</view>
		</view>
		<view class="bomBox">
			<view class="c_title">
				<image class="title_icon m_left_16" src="../../static/img/feedback/feedback.png"></image>
				反馈意见
			</view>
			<view class="line"></view>
			<view class="uni-textarea">
				<textarea placeholder="请阐述您问题和意见，以便我们提供更好的帮助" placeholder-style="color:#C6C6C6;font-size:14px" @input="conInput"
				 v-model="content" @blur="bindTextAreaBlur" auto-height maxlength="200" />
				</view>
			<view class='text_right'>
                 <view class="em" style='color:#C6C6C6'>{{tatVal}}/200</view>
            </view>
		</view>
		<view  class="btn_sub sub" v-show="content.length!=0" @tap="sub"> 提交</view>
		<view  class="btn_sub_dis sub" v-show="content.length===0"> 提交</view>
	</view>
</template>
	
<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import {feedback,getFeedList} from '../../api/user.js'
	export default {
		 data(){
			return{
				btnData:[
					
				],
				content:'',
				tatVal: 0,
				feedback_type_id:1,
			}
		},
		onShow() {
			this.getFeedList()
		},
		methods:{
			getFeedList(){
				getFeedList().then(res=>{
					console.log(res,555)
					res.data.forEach(item=>{
						this.btnData.push({
							index:item.value,
							label:item.label,
							isChoose:false
						})
					}),
					this.btnData[0].isChoose = true
				})
			},
			//选择反馈类型
			choose(name){
				this.btnData.forEach(res=>{
					if(name === res.label){
						res.isChoose = true
					}else{
						res.isChoose = false
					}
					if(res.isChoose) {
						this.feedback_type_id = res.index
					}	
				})
			},
			 bindTextAreaBlur: function (e) {
			},
			//限制反馈信息长度为200
			conInput(e){
                this.tatVal = e.detail.value.length;
                if(this.tatVal == 200){
                    uni.showToast({
                        icon: 'none',
                        title: '最多只能输入200字'
                    });
                }
            },
			//提交反馈信息
			sub(){
				feedback({
					feedback_type_id:this.feedback_type_id,
					feedback_content:this.content
				}).then(res=>{
					// console.log(res)
					if(res){
						if(res.code === 20000){
							uni.showModal({
								title:'提交成功，返回首页',
								content:'',
								showCancel:false,
								success: (res) => {
								    if (res.confirm) {
										// let showT = true
								        uni.switchTab({
								            url: "/pages/index/index"
								        });
								    }
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.containers{
		padding-top: 12px;
	}
	.topBox{
		height: 113px;
		background-color: #FFFFFF;
		margin-bottom: 12px;
	}
	.c_title{
	    height:22px;
	    font-size:16px;
	    font-family:PingFangSC-Medium,PingFang SC;
	    font-weight:500;
	    color:rgba(68,68,68,1);
	    line-height:22px;
	    display: inline-flex;
	    margin-top: 20px;
	}
	.title_icon{
	    width: 20px;
	    height: 20px;
	    margin: 1px 10px 0 0;
	}
	.m_left_16{
	    margin-left: 16px !important;
	}
	.btnBox{
		margin-top: 11px;
		height: 61px;
	}
	.btn{
		display: inline-block;
		width:76px;
		height:28px; 
		background: #F5F5F5 !important;
		color: #0AC770;
		font-size:12px;
		border-radius: 20px;
		line-height:28px;
		margin-right: 12px ;
		color: #999999;
		text-align: center;
		
	}
	.bomBox{
		background-color: #FFFFFF;
		height: 240px;
		position: relative;
	}
	.active{
		color: #0AC770;
		background: rgba(10, 199, 112, 0.05);
		border: 1px solid #0AC770;
	}
	.line{
		padding-left: 16px;
	    width:100%;
	    height:1px;
	    background-color: #F1F1F1;
	    margin: 10px 0 0 12px;
	}
	uni-textarea{
		height: 218px !important;
	}
	textarea{
		height: 218px !important;
		width: 100%;
		padding: 12px 24px 24px 12px;
	}
	.text_right{
		width: 50px;
		position:absolute;
		right: 14px;
		bottom:12px ;
	}
	.sub{
		font-size:18px;
		text-align: center;
		line-height:48px;
		width:343px;
		height:48px;
		margin: 0 auto;
		color: #FFFFFF;
	}
	.btn_sub{
		margin-top: 56px;
		background: #0AC770;;
		border-radius:24px;
	}
	.btn_sub_dis{
		margin-top: 56px;
		background:rgba(198,198,198,1);
		border-radius:22px;
	}
</style>
